<template>
  <div class="search-panel">
    <div class="searchbar-header">
      <a href="#">
        <img 
          src="//s0.meituan.net/bs/fe-web-meituan/e5eeaef/img/logo.png" 
          alt="美团"
        >
      </a>
    </div>
    <div class="searchbar-input">
      <div class="top-input">
        <el-input 
          v-model="search"
          placeholder="搜索商家或地点"
          class="inp"
          @focus="focusHandler"
          @blur="blurHandler"
          @input="inputHandler"
        />
        <button class="el-button el-button--primary"><i class="el-icon-search" /></button>
        <dl 
          v-show="isHotPlace"
          class="hot-place"
        >
          <dt>热门搜索</dt>
          <dd
            v-for="(item, index) of $store.state.home.hotPlace.slice(0, 5)"
            :key="index"
            @click="$router.push({path: '/products', query: {keyword: encodeURIComponent(item.name)}})"
          >{{ item.name }}</dd>
        </dl>

        <dl
          v-show="isSearchList"
          class="search-list"
        >
          <dd
            v-for="(item, index) in searchList"
            :key="index"
            @click="$router.push({path: '/products', query: {keyword: encodeURIComponent(item.name)}})"
          >{{ item.name }}</dd>
        </dl>
      </div>

      <p class="mid-suggest">
        <span 
          v-for="(item, index) of $store.state.home.hotPlace.slice(0, 5)"
          :key="index"
          @click="$router.push({path: '/products', query: {keyword: encodeURIComponent(item.name)}})"
        >{{ item.name }}</span>
      </p>
    </div>

    <div class="searchbar-security">
      <ul class="security">
        <li>
          <i class="refund" />
          <p class="txt">随时退</p>
        </li>
        <li>
          <i class="single" />
          <p class="txt">不满意免单</p>
        </li>
        <li>
          <i class="overdue" />
          <p class="txt">过期退</p>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
import _ from 'lodash'

export default {
  data() {
    return {
      isFocus: false,
      search: '',
      hotPlace: [],
      searchList: []
    }
  },
  computed: {
    isHotPlace() {
      return this.isFocus && !this.search
    },
    isSearchList() {
      return this.isFocus && this.search
    }
  },
  methods: {
    focusHandler() {
      this.isFocus = true
    },
    blurHandler() {
      setTimeout(() => {
        this.isFocus = false
        global.console.log("???")
      }, 200)
    },
    inputHandler: _.debounce(async function() {
      let self = this
      let city = self.$store.state.geo.position.city.replace('市', '')
      self.searchList = []

      let {status, data: {top}} = await self.$axios.get('/search/top', {
        params: {
          input: self.search,
          city
        }
      })

      self.searchList = top.slice(0, 10)
    }, 300)
  }
}
</script>

<style lang="stylus" scoped>
  .search-panel
    width 1190px
    height 157px
    margin 0 auto
    .searchbar-header
      float left
      min-width 220px
      height 54px
      padding-top 28px
      padding-right 60px
      padding-bottom 40px
      font-size 16px
      a
        display block
        img 
          width 126px
          height 46px
    .searchbar-input
      position relative
      float left 
      padding-top 28px
      .top-input
        position relative
        width 550px 
        height 40px
        border 1px solid #13d1be
        background-color #ffffff
        border-radius 4px
        .el-input 
          display inline-block
          width 84%
          box-sizing border-box
          font-size 15px
          & >>> input
            border none
            border-top-right-radius 0
            border-bottom-right-radius 0
        .el-button
          float right
          background #73e1ce
          width 16%
          height 100%
          box-sizing border-box
          color #ffffff
          border none 
          border-color transparent
          border-bottom-left-radius 0
          border-top-left-radius 0
          vertical-align -1px
          font-size 16px
          i
            font-weight bold
        .hot-place
        .search-list
          position absolute 
          top 103%
          left 0
          background-color #ffffff
          padding 10px
          font-size 12px
          width 462px
          box-sizing border-box
          border 1px solid #e5e5e5
          border-top none 
          z-index 999
          box-shadow 0 3px 5px 0 rgba(0, 0, 0, .1)
          border-bottom-left-radius 4px
          border-bottom-right-radius 4px
          dt
            padding-bottom 5px
            line-height 24px
            color #999
            font-weight bold
          dd
            display inline-block
            color #666
            margin-right 10px
            margin-bottom 5px
            padding-top 5px
            cursor pointer
            &:hover
              background #f8f8f8
              color #31bbac
        .search-list
          dd
            display block
            padding 3px 10px
            line-height 1.6
      .mid-suggest
        overflow hidden
        width 550px
        height 25px
        box-sizing border-box
        padding-top 8px
        padding-left 12px
        text-align left 
        font-size 12px
        span
          display inline-block
          margin-right 10px
          margin-bottom 3px
          cursor pointer
          color #999
          &:hover
            color #31bbac

    .searchbar-security
      padding-top 15px
      text-align right
      .security
        li
          display inline-block
          padding 0 5px
          text-align center
        i 
          font-style normal 
          &::after
            font-family iconfont 
            font-size 36px
            color #13d1be
        .refund
          &::after
            content '\e65f'
        .single
          &::after
            content '\e652'
        .overdue 
          &::after
            content '\e65e'
        .txt
          color #999
          font-size 12px
          line-height 1
          cursor pointer
  @media screen and (max-width: 1200px)
      .search-panel
        width 960px
      .searchbar-security
        display none 
      .top-input
        width 420px !important 
</style>
